<template>
  <lay-container fluid="true" style="padding: 10px">
    <lay-row :space="10">
      <lay-col :md="24">
        <lay-card>
          <lay-form style="margin-top: 20px">
            <lay-row>
              <lay-col :md="6">
                <lay-form-item label="所属平台" label-width="60">
                  <lay-select v-model="platSelect"  
                  :options="platList"
                  @change="platChange"
                  ></lay-select>
                </lay-form-item>
              </lay-col>
              <lay-col :md="10">
                 
                 
              </lay-col>
              

              <lay-col :md="6">
                <lay-form-item label-width="0">
                  <lay-button type="primary" @click="toSearch">查询</lay-button>
                  <lay-button @click="toReset">重置</lay-button>
                </lay-form-item>
              </lay-col>
            </lay-row>
          </lay-form>
        </lay-card>
      </lay-col>
      <lay-col :md="24">
        <lay-card>
          <lay-table
            id="Id" 
            children-column-name="Children"
            :columns="columns"
            :dataSource="dataSource"
            :default-toolbar="defaultToolbar"
            v-model:selectedKeys="selectedKeys"
             
            :default-expand-all="expandAllV"
            @row="rowClick"
            @Change="pageChange"
            @sortChange="sortChange"
          >
            <template v-slot:toolbar>
              <lay-row>
                <lay-col :md="18">
                   <lay-button size="sm" type="primary"
                    @click="addRow('0')"
                    v-permission="['/htmenu/insert']"
                    >添加目录</lay-button>

                    <lay-button size="sm" type="primary"
                    @click="addCD('0')"
                    v-permission="['/htmenu/insert']"
                    >添加菜单</lay-button>
                </lay-col>
                <lay-col style="text-align:right;">
                   
                   
                  <lay-button size="sm" @click="expandAll(true)">展开全部</lay-button>
                  <lay-button size="sm" @click="expandAll(false)">折叠全部</lay-button>

                </lay-col>
              </lay-row>
              
            </template>
            <template v-slot:Name="{ data }"> 
              
             <lay-icon :class="data.ImgUrl"></lay-icon> &nbsp;&nbsp;
             {{data.Name}}

            </template>
            <template v-slot:Auths="{ data }">     
              <div v-for="(auth, index) in data.Auths" :key="index">          
               
                <lay-checkbox name="like" skin="primary" 
                :value="auth.Name"
                :disabled="true"
                >{{auth.Name}}</lay-checkbox>
              </div> 
            </template>
             
            <template v-slot:operator="{data}">
              <lay-button size="xs" 
              border="green" border-style="dashed" 
              v-if="data.LX=='目录'"
              @click="updateRow(data)"
              v-permission="['/htmenu/update']"
              >修改</lay-button>

              <lay-button size="xs" 
              border="green" border-style="dashed" 
              v-if="data.LX=='菜单'"
              @click="updateCD(data)"
              v-permission="['/htmenu/update']"
              >修改</lay-button>


              <lay-button size="xs"
              border="red" border-style="dashed"
              @click="deleteRow(data)"
              v-permission="['/htmenu/delete']"
              >删除</lay-button>

              <lay-button size="xs"
              border="green" border-style="dashed" 
              v-if="data.LX=='目录'"
              @click="addCD(data.Id)"
              v-permission="['/htmenu/insert']"
              >添加菜单</lay-button>

              <lay-button size="xs"
              border="green" border-style="dashed" 
              v-if="data.LX=='目录'"
              @click="addRow(data.Id)"
              v-permission="['/htmenu/insert']"
              >添加目录</lay-button>

            </template>
           
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-row>
  </lay-container>
</template>

<script lang="ts">
import { ref, watch,reactive,onMounted,h } from 'vue'
import { layer } from '@layui/layer-vue'
import MyHttp from "../../library/MyHttp";  
import MyWin from "../../library/MyWin"; 
import MyPage from "../../library/MyPage"; 
import MyData from "../../library/MyData"; 
import {MyExcel} from "../../library/MyExcel"; 
import {MySimpleExport,TableColumn} from "../../library/MySimpleExport"; 
import addml from "./addml.vue";  
import addcd from "./addcd.vue";  

export default {
  setup() {
    const baseUrl="/htmenu";
    const myWin=ref<any>(null);
    const selectedKeys = ref(['1']) 
    const defaultToolbar = ref(false)
    const page = ref(  new MyPage()  ); 
    
    const columns = [
      // {
      //   title: '复选',
      //   width: '50px',
      //   type: 'checkbox',
      //   fixed: 'left'
      // },
      { key:'Name',title: '菜单名称', width: '100px',customSlot: 'Name', },
      { key:'Code',title: '菜单代码', width: '100px', },

{ key:'LX',title: '类型', width: '100px', },
{ key:'Auths',title: '权限', width: '300px',customSlot: 'Auths', },


 
       
      {
        title: '操作',
        width: '150px',
        customSlot: 'operator',
        // key: 'operator',
        fixed: 'right'
      }
    ]

    const dataSource = ref([]);

    const rowClick = function (data: any) {}

    const rowDoubleClick = function (data: any) {}

    const pageChange = function ({ current, limit }: any) {
      

    }
    function toSearch() { 
      query(1);
    }
     
    function toReset() {
         
    }

    const qm=reactive({
      Id:""
    }); 
    const query=async (pageIndex:number) =>{
      
      qm.Id=platSelect.value;
      var r=await new MyHttp().post(baseUrl+"/GetTree",qm,
        { 
        }
      ); 
      dealChildern(r.data);
      dataSource.value=r.data;  
    }
    const dealChildern=(datas:any)=>{
      let arr=datas as Array<any>;
        arr.forEach(   elment   =>{ 
        if(elment.LX=="菜单"){
          elment.Auths=elment.Children;
          elment.Children=null; 
          return;
        }
        if(elment.Children.length==0){
          elment.Children=null; 
        }else{
          dealChildern(elment.Children );
        }
      })
    }
    const sortChange = (key: any, sort: number) => {
      
      query(0);
    }
    const tableExport=async()=>{
      let url=baseUrl+"/page";
      let name="HTAction";
      var cols=columns as Array<TableColumn>;
      new MySimpleExport().exportExcel(
        {
          qm,
          url,
          name,
          columns:cols
        }
        );
    }
    
    const addRow=async(PId:any)=>{
      
      let qm={
        Id:platSelect.value,
        HTPlat_Id:platSelect.value,
        LX:"目录",
      }
      var r=await new MyHttp().post(baseUrl+"/InsertInit",qm,
        { 
        }
      ); 
      r.data.PId=PId;

      var opt={
          title: '新增目录',
          content: h( addml, 
            {  
             data:r.data, 
             isAdd:true,
             onOk:(data:any)=>{
                query(0);
             }       
            }
            ), 
          area: ['400px','700px'] 
        }; 
        myWin.value.open(opt ); 
    }
    const updateRow=async(data:any)=>{
      let qm={
        Id:data.Id
      }
      var r=await new MyHttp().post(baseUrl+"/detail",qm,
        { 
        }
      ); 
      
      var opt={
          title: '修改目录',
          content: h( addml, 
            {  
             data:r.data, 
             isAdd:false,
             onOk:(data:any)=>{
                query(0);
             }       
            }
            ), 
          area: ['400px','700px'] 
        }; 
        myWin.value.open(opt ); 
    }

    const deleteRow=async(data:any)=>{
      let msg=`是否删除 ${data.Name} ?`;
      let qm={
        Id:data.Id
      };
      MyWin.confirm(msg,{
          onOK:async()=>{
            var r= await new MyHttp().post(baseUrl+"/delete",qm,
              { 
              }
            ); 
            query(0);
          }
      })
    }
     
    const addCD=async(PId:any)=>{
      let qm={
        Id:PId,
        HTPlat_Id:platSelect.value,
        LX:"菜单",
      }
      var r=await new MyHttp().post(baseUrl+"/InsertInit",qm,
        { 
        }
      ); 
      
      var opt={
          title: '新增菜单',
          content: h( addcd, 
            {  
             data:r.data, 
             isAdd:true,
             onOk:(data:any)=>{
                query(0);
             }       
            }
            ), 
          area: ['400px','700px'] 
        }; 
        myWin.value.open(opt ); 
    }
    const updateCD=async(data:any)=>{
      let qm={
        Id:data.Id
      }
      var r=await new MyHttp().post(baseUrl+"/detail",qm,
        { 
        }
      ); 
      
      var opt={
          title: '修改菜单',
          content: h( addcd, 
            {  
             data:r.data, 
             isAdd:false,
             onOk:(data:any)=>{
                query(0);
             }       
            }
            ), 
          area: ['400px','700px'] 
        }; 
        myWin.value.open(opt ); 
    }

    const platList=ref<Array<any>>();
    const platSelect=ref<any>("");
    const platListQuery=async()=>{
      var r= await new MyHttp().post("/htplat"+"/list",{},
              { 
              }
            ); 
      MyData.toLayOptions(r.data)
      platList.value= r.data; 
      platSelect.value=r.data[0].Id;
      
      query(0);
    }
    const platChange=(data:any)=>{
      query(0);
    }

    const expandAllV=ref<boolean>(true);
    const expandAll=(expanded:boolean)=>{
      expandAllV.value=expanded;
    }


    onMounted(() =>{  
      myWin.value=new MyWin();
      platListQuery();
    });
    return {
      columns,
      dataSource,
      selectedKeys, 
      defaultToolbar,
      page,
      rowClick,
      rowDoubleClick,
      pageChange,
      toReset,
      toSearch,
       

      qm,
      query,
      
      sortChange,
      tableExport,
    
      myWin,
      addRow,
      updateRow,
      deleteRow,

      platList,
      platSelect,
      platChange,

      expandAllV,
      expandAll,

      addCD,
      updateCD,

    }
  }
}
</script>
